<template>
  <div class="login-container">
    <div class="login-form">
      <h1 class="form-title">融合日程管理系统</h1>
      <form @submit.prevent="handleLogin">
        <div class="form-group">
          <label for="username">账号</label>
          <input type="text" id="username" v-model="username" placeholder="请输入账号" required />
        </div>
        <div class="form-group">
          <label for="password">密码</label>
          <input
            type="password"
            id="password"
            v-model="password"
            placeholder="请输入密码"
            required
          />
        </div>
        <button type="submit" class="login-button">登 录</button>
      </form>
    </div>
  </div>
</template>

<!-- LoginPage.vue (只需替换 <script> 部分) --><!-- LoginPage.vue (script部分) -->
<script>
import api from '@/utils/api'

export default {
  name: 'LoginPage', // <-- 明确指定一个多单词的名称
  data() {
    // <-- 您需要把 data() 和 username, password 属性加回来
    return {
      username: '',
      password: '',
    }
  },
  // ... other parts
  methods: {
    async handleLogin() {
      // (可选但推荐) 增加前端校验，确保数据不为空
      if (!this.username.trim() || !this.password.trim()) {
        alert('账号和密码不能为空！')
        return
      }

      try {
        // 【核心】确保 api.post 的第二个参数是一个包含了数据的非空对象
        // 这个对象会被Axios序列化为JSON字符串，并放入请求体中
        const loginData = {
          account: this.username,
          password: this.password,
        }

        console.log('即将发送到后端的数据:', loginData) // <--- 添加这行日志用于调试

        const response = await api.post('/login', loginData)

        // ... 后续处理逻辑 ...
        if (response.data.code === 1) {
          alert('登录成功！')

          // 【核心操作】: 将用户信息存入 localStorage
          const userInfo = response.data.data
          if (userInfo && userInfo.userId) {
            console.log('登录成功，将用户信息存入localStorage:', userInfo)
            // 1. 将整个用户信息对象转换为JSON字符串
            // 2. 使用 'userInfo' 作为键名，存入 localStorage
            localStorage.setItem('userInfo', JSON.stringify(userInfo))

            // 您也可以只存储 userId
            // localStorage.setItem('userId', userInfo.userId);
          }

          this.$router.push('/hometar')
        } else {
          alert('登录失败: ' + response.data.msg)
        }
      } catch (error) {
        console.error('登录请求发生错误:', error)
        alert('登录服务异常，请稍后再试。')
      }
    },
  },
}
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f2f5; /* 浅灰色背景，更显专业 */
}

.login-form {
  background: #ffffff;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 400px;
  text-align: center;
}

.form-title {
  margin-bottom: 30px;
  font-size: 24px;
  color: #333;
  font-weight: 600;
}

.form-group {
  margin-bottom: 20px;
  text-align: left;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #555;
}

.form-group input {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box; /* 确保 padding 不会影响宽度 */
  transition: border-color 0.2s;
}

.form-group input:focus {
  outline: none;
  border-color: #1890ff; /* 聚焦时边框变蓝 */
}

.login-button {
  width: 100%;
  padding: 12px 0;
  font-size: 16px;
  color: #fff;
  /* 使用截图中的蓝色作为主色调 */
  background-color: #1875f0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
  font-weight: 500;
}

.login-button:hover {
  background-color: #409eff; /* 鼠标悬停时颜色变浅 */
}
</style>
